<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格</title>
  </head>
  <body>
    <!-- 
        表格标签
          table       表格总标签
          tr          行
          td          列
          th          强调列,加粗居中,一般适合写在表头
          caption     表格名称

          thead       表头区域
          tbody       表体区域
          tfoot       表尾区域
          注意: 这三个标签是区域标签,本质上没有含义,但是可以通过不同区域的划分来方便不同的样式处理


          表格属性,注意:表格属性在此处是临时使用,后面会使用css来代替
          width       宽度,它可以控制表格的宽度,也可以控制单元格的宽度
          height      高度
          border      边框
          cellspacing 单元格间隙,设置为0表示合并边框
          cellpadding 内容和边框的距离
          align       表格位置,设置成center居中


          表格单元格合并操作
          rowspan     行合并
          colspan     列合并
          注意: 合并后,需要删除多余的单元格!!!


          表格快捷输入方式
          table>tr*数字>td*数字
     -->
    <table border="1" cellspacing="0" cellpadding="20" width="700" align="center">
      <!-- 表名 -->
      <caption>
        用户表
      </caption>
      <thead>
        <!-- 行 -->
        <tr>
          <!-- 列 -->
          <th width="10%">用户编号</th>
          <th width="30%">姓名</th>
          <th width="30%">年龄</th>
          <th width="30%">性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>jack</td>
          <td>25</td>
          <td>男</td>
        </tr>
        <tr>
          <td>2</td>
          <td>rose</td>
          <!-- rowspan 行合并 -->
          <td rowspan="2">23</td>
          <td>女</td>
        </tr>
        <tr>
          <td>3</td>
          <td>tom</td>
          <!-- <td>23</td> -->
          <td>男</td>
        </tr>
        <tr>
          <!-- colspan 列合并 -->
          <td colspan="4"></td>
          <!-- <td></td>
          <td></td>
          <td></td> -->
        </tr>
      </tbody>
    </table>
  </body>
</html>
